<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE>
<html>
    <head>
        <title>${article.title}</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="keywords" content="java技术分享">
        <%@ include file="/WEB-INF/view/common/pace.jsp"%>
        <%@ include file="/WEB-INF/view/common/highlight.jsp"%>
    </head>
<body>
    <!-- 导航栏	start -->
    <jsp:include page="/WEB-INF/view/common/header.jsp" />
    <!-- 导航栏	end -->
    
    <!-- 动画 start -->
    <div role="main" class="site clearfix">
        <div class="context-loader-container" id="site-container">
            <section class="aws-section" id="aws">
                <div class="leaf-header-container">
                    <div class="bg-animation">
                        <img width="300" src="http://www.htmleaf.com/templets/default/picture/cloud-1.png" class="cloud cloud-1" alt="Cloud-1"/> 
                        <img width="347" src="http://www.htmleaf.com/templets/default/picture/cloud-2.png" class="cloud cloud-2" alt="Cloud-2"/> 
                        <img width="50" src="http://www.htmleaf.com/templets/default/picture/corel.png" class="cloud corel" alt="corel"/> 
                        <img width="470" src="http://www.htmleaf.com/templets/default/picture/cloud-3.png" class="cloud cloud-3" alt="Cloud-3"/> 
                        <img width="762" src="http://www.htmleaf.com/templets/default/picture/cloud-4.png" class="cloud cloud-4" alt="Cloud-4"/> 
                        <img width="587"  src="http://www.htmleaf.com/templets/default/picture/cloud-5.png" class="cloud cloud-5" alt="Cloud-5"/> 
                        <img width="857" src="http://www.htmleaf.com/templets/default/picture/cloud-6.png" class="cloud cloud-6" alt="Cloud-6"/>
                    </div>
                    <div class="htmleaf-header-content">
                        <h2>J2EE技术分享<br> 自由分享 源码、Demo下载、高级技术实例教程</h2>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- 动画 end -->
    
    <div id="wrap">
        <div id="container">
            <div id="left_side">左侧内容</div>
            <div id="content">

                <!-- 中间内容   start -->
                <div style="width: 100%;">
                    <!-- 当前位置   start -->
                    <ol class="breadcrumb" style="margin-top: 10px; width: 100%;">
                        <li class="active"><i class="fa fa-home">&nbsp;</i>当前位置：</li>
                        <li><a href="javascript:window.parent.location.href='<c:url value="/index/index"/>'">首页</a></li>

                        <c:forEach items="${address}" var="name" varStatus="i">
                            <li><a class="active">${name}</a></li>
                        </c:forEach>
                        <li>
                            <a style="color: #777; text-decoration: none;">${article.title}</a>
                        </li>
                    </ol>
                    <!-- 当前位置   end -->

                    <section class="container panel panel-default" style="margin-top: 30px; width: 100%;background-color:#f7f7f9;border-color: #ddd;">
                        <!-- -------------------------------------------------- 中间内容 start --------------------------------------------------- -->
                        <div class="content-wrap">
                            <div class="content">
                                <div class="hot-posts">
                                    <h3 style="text-align: center; max-width: 100%;">
                                        <i class="fa fa-quote-left"></i>
                                        <span style="padding-left: 15px; padding-right: 10px;">${article.title}</span>
                                        <i class="fa fa-quote-right"></i>
                                    </h3>
                                    <br>
                                </div>

                                <div style="width: 100%; margin-left: 0px; height: auto;font-size: 14px;">${article.content}</div>

                            </div>
                        </div>
                        <!-- -------------------------------------------------- 中间内容 end --------------------------------------------------- -->
                    </section>
                </div>
                <!-- 中间内容   end -->

            </div>
            <div id="right_side" style="width: 8%;">右侧内容</div>
        </div>
        <!-- <div id="footer">footer</div> -->
    </div>
</body>
</html>